<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>4-1盒的基本类型</title>
    <link rel="stylesheet" href="../common.css">
    <script src="../jquery-2.2.0.js"></script>
    <script src="../main.js"></script>
    <style>
        #base *{
            outline: 1px solid black;
        }
        #base div{
            background-color: #94aabc;
        }
        #base span{
            background-color: #0088cc;
        }
        #base .inline{
            display: inline;
        }
        #base .block{
            display: block;
        }

        #inline-block div:nth-child(1),#inline-block div:nth-child(2){
            background-color: #8084cb;
            display: inline-block;
        }
        #inline-block div:nth-child(3),#inline-block div:nth-child(4){
            background-color: #74b0b7;
            display: inline;
        }
        #inline-block div{
            width: 360px;
            height: 100px;
            display: inline-block;
        }

        #a, #b{
            display: block;
            width: 300px;
            float: left;
        }
        #a,#aa{
            background-color: #ffdcb9;
        }
        #b,#bb{
            background-color: #91a0e1;
        }
        #c{
            width: 580px;
            background-color: #e6d1ff;
            clear: both;
        }

        #aa, #bb{/*必须除去这两段代码中的换行，文本之间就会紧密相连*/
            width:300px;
            display: inline-block;
        }
        #cc{
            width: 580px;
            background-color: #e6d1ff;
        }
        #inline-block-layout div{
            vertical-align: top;/*顶对齐*/
        }

        #inline-block-nav ul li{
            display: inline-block;
            border: 1px solid #666;
            margin-right: -5px;
        }
        #inline-block-nav ul li a{
            display: inline-block;
            padding: 5px 10px;
            text-decoration: none;
            background-color: #a3ddff;
        }

        #inline-table table{
            border-collapse: collapse;
            display: inline-table;
            vertical-align: bottom;
        }

        #list-item div,#list-item span{
            display: list-item;
            list-style-type: circle;
            margin-left: 5rem;
        }
        #run-inAndCompact dd{
            background-color: #74b0b7;
        }
        #run-inAndCompact dt{
            border: 2px solid #f00;
        }
        #run-inAndCompact dl:nth-child(2) dt{
            display: run-in;
        }
        #run-inAndCompact dl:nth-child(3) dt{
            display: compact;/*css2.1已经将此移除！*/
        }

        #table .table{
            display: table;
            border: 3px solid #0af;
        }
        #table .caption{
            display: table-caption;
            text-align: center;
        }
        #table .thead{
            background-color:  #ffa;
            display: table-header-group;
        }
        #table .tr{
            display: table-row;
        }
        #table .td{
            display: table-cell;
            padding: 10px;
            border:2px solid #af0;
        }

        #displayNone li:nth-child(3){
            display: none;
        }
    </style>
</head>
<body>
<h1>4-1盒的基本类型</h1>
<h3>css中原来的两种类型及互换显示</h3>
<section id="base">
   <div>这是div元素</div>
   <div>这是div元素</div>
   <span>这是span元素</span>
   <span>这是span元素</span>
    <div class="inline">这是div元素显示成span</div>
    <div class="inline">这是div元素显示成span</div>
   <span class="block">这是span元素显示成block</span>
   <span class="block">这是span元素显示成block</span>
</section>

<h3>inline-block具有宽度和高度属性</h3>
<code>    width: 360px;
    height: 100px;
    display: inline-block;</code>
<section id="inline-block">
   <div>这是div元素显示为inline-block</div>
   <div>这是div元素显示为inline-block</div>
   <div>这是div元素显示为inline</div>
   <div>这是div元素显示为inline</div>
</section>

<h3>block+float多列布局</h3>
<section id="block-layout">
   <div id="a">A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div>
   <div id="b">B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B </div>
   <div id="c">C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C </div>
</section>

<h3>inline-block多列布局，如果两个元素并在一起，之间会有很小的缝隙，解决方案是在代码中不要添加回车或空格，要紧挨着写，或者通过css调间距</h3>
<code>…… A A A A A A &lt;/div&gt;&lt;div id="bb"&gt;B B B B B ……</code>
<section id="inline-block-layout">
   <div id="aa">A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div><div id="bb">B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B </div>
   <div id="cc">C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C </div>
</section>

<h3>inline-block水平导航</h3>
<section id="inline-block-nav">
    <ul>
        <li><a href="#">石榴</a></li>
        <li><a href="#">菠萝</a></li>
        <li><a href="#">柚子</a></li>
        <li><a href="#">糖浆</a></li>
        <li><a href="#">秋梨膏</a></li>
    </ul>
</section>

<h3>表格作为行内元素显示</h3>
<code>    border-collapse: collapse;
    display: inline-table;
    vertical-align: bottom;
</code>
<section id="inline-table">表格前面的文字
    <table border="1">
        <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
        <tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
        <tr><td>9</td><td>10</td><td>11</td><td>12</td></tr>
    </table>表格后面的文字
</section>

<h3>将div和span元素以列表显示</h3>
<code>    display: list-item;
    list-style-type: circle;
    margin-left: 5rem;
</code>
<section id="list-item">
    <div>这是div元素</div>
    <div>这是div元素</div>
    <span>这是span元素</span>
    <span>这是span元素</span>
</section>

<h2 class="problem">Chrome从32版本开始将这个run-in属性移除了</h2>
<h2 class="problem">CSS2.1版本开始将这个compact属性移除了</h2>
<h3>run-in和compact，不能正常显示也不要紧</h3>
<section id="run-inAndCompact">
    <dl>
        <dt>仙人掌:</dt>
        <dd>一种带刺植物，汁水可以给猫狗解毒</dd>
    </dl>
    <dl>
        <dt>仙人掌:</dt>
        <dd>一种带刺植物，汁水可以给猫狗解毒</dd>
    </dl>
    <dl>
        <dt>仙人掌:</dt>
        <dd>一种带刺植物，汁水可以给猫狗解毒</dd>
    </dl>
</section>

<h3>将div以表格显示</h3>
<section id="table">
    <div class="table">
        <div class="caption">字母表</div>
        <div class="thead">
            <div class="tr">
                <div class="td">1st</div>
                <div class="td">2st</div>
                <div class="td">3st</div>
                <div class="td">4st</div>
                <div class="td">5st</div>
            </div>
        </div>
        <div class="tr">
            <div class="td">A</div>
            <div class="td">B</div>
            <div class="td">C</div>
            <div class="td">D</div>
            <div class="td">E</div>
        </div>
        <div class="tr">
            <div class="td">F</div>
            <div class="td">G</div>
            <div class="td">H</div>
            <div class="td">I</div>
            <div class="td">J</div>
        </div>
    </div>
</section>

<h3>display:none，元素不显示，这里将C隐藏了</h3>
<section id="displayNone">
    <ul>
        <li><a href="#">A</a></li>
        <li><a href="#">B</a></li>
        <li><a href="#">C</a></li>
        <li><a href="#">D</a></li>
        <li><a href="#">E</a></li>
    </ul>
</section>

</body>
</html>